<!DOCTYPE html>
<html lang="en">
<link>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>数据字典在线查询</title>
    <link rel="stylesheet" href="layui/css/layui.css" media="all"/>
    <script src="js/jquery-3.6.0.min.js"></script>
    <script src="js/download.js"></script>
    <script src="layui/layui.js" charset="utf-8"></script>
    <style>
        html,body{
            width: 100%;
            height: 100%;
        }
        .container{
            width: 100%;
            height: 90%;
        }
        .layui-form-div {
            padding-top: 8px;
            text-align: center;
            height: 50px;
            /*line-height: 50px;*/
            background: #009688;
        }
        .layui-form-item{
            margin: 0 auto;
        }
        .layui-form-label, .layui-btn {
            color: #FFF;
        }
    </style>
</head>
<body>
<form class="layui-form layui-form-div layui-anim layui-anim-down">
    <div class="layui-form-item">
        <label class="layui-form-label">数据库：</label>
        <div class="layui-col-xs1">
            <select name="dbKeys" id="dbKeys" lay-verify="required" lay-filter="dbKeys">
                <option value=""></option>
            </select>
        </div>
        <div id = "hidden_div">
        </div>
        <div class="layui-input-block layui-col-xs3">
            <button type="button" id="viewOnline" class="layui-btn layui-btn-normal layui-btn-radius">查询</button>
            <button type="reset" id="reset" class="layui-btn layui-btn-primary layui-btn-radius">重置</button>
            <button type="button" id="reload" class="layui-btn layui-btn-warm layui-btn-radius">配置更新</button>
        </div>
    </div>
</form>

<div class = "container" >
    <iframe src = "" id="info-frame" name="info-frame"  width="100%" height="100%" frameborder="no" border="0"></iframe>
</div>

<script>
    const URL_NONE_IMG = "none.html";

    layui.use(function(){
        var form = layui.form;
        // 加载下载相关
        loadDLH();
        // 加载数据
        loadData(form);
        // 加载默认图片
        modiflyIframe(URL_NONE_IMG);

        $("#viewOnline").click(function(){
            let dbKey = $("#dbKeys").val()
            if (dbKey) {
                modiflyIframe("viewOnline?dbKey=" + dbKey);
            } else {
                layer.msg('【数据库】选项不能为空', {icon: 5});
            }
        });
        $("#downLoad").click(function(){
            let dbKey = $("#dbKeys").val()
            let fileType = $("#fileType").val()
            if (dbKey && fileType) {
                modiflyIframe("downLoad?dbKey=" + dbKey + "&fileType=" + fileType);
            } else {
                layer.msg('【数据库】和【导出类型】不能为空', {icon: 5});
            }
        });
        $("#reset").click(function(){
            modiflyIframe(URL_NONE_IMG);
        });
        $("#reload").click(function(){
            $.get("reload", function(data) {
                // let json = eval("(" + data + ")");
                if(data.code == 200) {
                    layer.msg('刷新配置成功！', {icon: 1}, function() {loadData(form)});
                    // 刷新
                    // loadData(form);
                } else {
                    layer.msg('刷新配置失败，请联系管理员！', {icon: 5});
                }
            });
        });

        // iframe 加载监听
        var iframe = document.getElementById("info-frame");
        if (iframe.attachEvent) {
            iframe.attachEvent("onload", closeAllLayui);
        } else {
            iframe.onload = closeAllLayui;
        }
    });

    function loadData(form) {
        $.ajax({
            method: "get",
            url: "/getFormData",
            contentType: "application/json",
            dataType: "json",
            success:function(result){
                if (result.code == 200) {
                    $("#dbKeys").html(getOptions(result.dbKeys));
                    $("#fileType").html(getOptions(result.fileType));
                    form.render('select');//需要渲染一下
                }else {
                    alert(result.msg);
                }
            }
        });
    }

    function getOptions(arr) {
        let html = '<option value="" selected=""></option>';
        for (let i = 0; i < arr.length; i++) {
            html += '<option value = "' + arr[i] + '">' + arr[i] + '</option>'
        }
        return html;
    }

    function modiflyIframe(url) {
        $('#info-frame').attr('src', url);
        layer.msg('loading..', {icon: 16, shade: 0.3, time:10000});
    }

    function closeAllLayui() {
        layer.closeAll();
    }
</script>
</body>
</html>